<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>管理信息系统课程设计 | MISP</title>
    <#include "/inc/head.ftl"/>
    <@head/>
</head>

<body>
<div id="wrapper">
    <!-- Navigation -->
    <#include "/inc/nav.ftl"/>
    <@nav/>
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <div class="panel-body">
                    <button id="btn-add" type="button" class="btn btn-success">添加房间状态</button>
                    <button id="btn-edit" type="button" class="btn btn-warning">修改房间状态</button>
                    <button id="btn-del" type="button" class="btn btn-danger">删除房间状态</button>
                </div>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">房间状态列表</div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <table width="100%" class="table table-striped table-bordered table-hover" id="list">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>房间状态名</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <!-- /.table-responsive -->
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">标题</h4>
                    </div>
                    <input id="id" type="hidden" class="form-control">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <form role="form" id="form">
                                    <input id="hiddenText" type="text" style="display:none">
                                    <div class="form-group">
                                        <label>房间状态名</label>
                                        <input id="statusName" type="text" class="form-control">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id="btn-submit" type="submit" class="btn btn-default">提交</button>
                        <button id="btn-reset" type="reset" class="btn btn-default">重置</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
        </div>

    </div>
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Page-Scripts  -->
<script>
    /* 模态框自动聚焦 */
    $(function() {
        $('#myModal').on('shown.bs.modal', function(e) {

            $('#statusName').focus(); //通过ID找到对应输入框，让其获得焦点

        });
    })

    /* 回车提交 */
    $('#statusName').keyup(function(event) {
        if (event.keyCode == 13) {
            $("#btn-submit").trigger("click");
        }
    });
    $(document).ready(function() {
        var table = $('#list').DataTable({
            "ajax": '${contextPath}/roomStatus/list',
            "language": {
                "url": "${contextPath}/vendor/datatables/i18n/Chinese.json"
            },
            "columns": [{
                "data": "id",
                "visible": false
            }, {
                "data": "statusName"
            }],
            responsive: true,
            select: true //datatables select 插件
        });

        /* 添加按钮 */
        $('#btn-add').click(function() {
            resetForm();
            $("#myModal #id").val("");
            $("#myModal #myModalLabel").text("添加房间状态");
            $('#myModal').modal({
                keyboard: false,
                show: true
            })
        });
        /* 修改按钮 */
        $('#btn-edit').click(function() {
            var rowData = table.rows({
                selected: true
            }).data().toArray();
            if (rowData.length == 1) {
                var id = rowData[0].id;
                $.ajax({
                    type: "get",
                    url: "${contextPath}/roomStatus/edit",
                    data: {
                        "id": id
                    },
                    dataType: "json",
                    success: function(json) {
                        $("#myModal #id").val(json.role.id);
                        $("#myModal #statusName").val(json.role.statusName);
                    }
                });
                $("#myModal #myModalLabel").text("修改房间状态");
                $('#myModal').modal({
                    keyboard: false,
                    show: true
                })
            } else {
                layer.msg('请选择一行!', {
                    time: 1000,
                    icon: 7
                }); //layer弹出层，1000代表1秒后关闭。7为图标编号
            }
        });

        /* 删除按钮 */
        $('#btn-del').click(function() {
            this.blur();
            var rowData = table.rows({
                selected: true
            }).data().toArray(); //得到datatables选中行的值并转成数组
            if (rowData.length == 1) {
                layer.msg('你确定删除该房间状态吗?', {
                    time: 0,
                    // skin: 'layui-layer-moon',
                    title: "删除房间状态",
                    success: function(layero, index) {
                        function fn(event) {
                            if (event.keyCode === 27) {
                                layer.close(index)
                            }
                            if (event.keyCode === 13) {
                                $('.layui-layer-btn0').click();
                            }
                        }
                        $(window).one('keydown', fn);
                    },
                    area: ['300px', '180px'],
                    fixed: false, //不固定
                    btn: ['确定', '取消'],
                    yes: function(index) {
                        del(rowData[0].id);
                        layer.close(index);
                    }
                });
            } else {
                layer.msg('请选择一行!', {
                    time: 1000,
                    icon: 7
                });
            }

        });

        /* 表单添加、修改提交按钮 */
        $("#myModal #btn-submit").click(function() {
            var id = $("#myModal #id").val();
            if (id == null || id == "") { //将添加和编辑表单合二为一。根据ID是否为空判断到底是添加还是修改。
                submit("${contextPath}/roomStatus/save");
            } else {
                submit("${contextPath}/roomStatus/update");
            }
        });

        $("#myModal #btn-reset").click(function() {
            resetForm();
        });

        /* 清空表单 */
        function resetForm() {
            $("#myModal #statusName").val("");
        }

        /* 表单提交操作 */
        function submit(url) {
            var id = $("#myModal #id").val();
            var statusName = $("#myModal #statusName").val();
            $.ajax({
                type: "post",
                url: url,
                dataType: "json",
                data: {
                    "role.id": id, //注意此处的role与role对应，id与role的属性id对应
                    "role.statusName": statusName
                },
                success: function(data) {
                    if (data.result) {
                        layer.msg(data.msg, {
                            time: 1000,
                            icon: 1
                        });
                        resetForm();
                        $("#myModal").modal('hide');
                        table.ajax.reload(); //重新加载table
                    } else {
                        layer.msg(data.msg, {
                            time: 1000,
                            icon: 1
                        });
                        resetForm();
                    }
                },
                error: function() {
                    layer.msg('操作失败!', {
                        time: 1000,
                        icon: 2
                    });
                }
            });
        }
        /* 删除操作 */
        function del(id) {
            $.ajax({
                type: "post",
                url: "${contextPath}/roomStatus/delete",
                dataType: "json",
                data: {
                    "id": id
                },
                success: function(data) {
                    if (data.result) {
                        layer.msg(data.msg, {
                            time: 1000,
                            icon: 1
                        });
                        table.ajax.reload();
                    }
                },
                error: function() {
                    layer.msg('系统出错!', {
                        time: 1000,
                        icon: 2
                    });
                }
            });
        }


    });
</script>
</body>

</html>